<template>
  <!-- 建档 -->
  <template v-if='projectInfo.stageStatus == "0"' class="td-item">
    <el-descriptions :column="2" size="large">
      <el-descriptions-item label-class-name="right-align" label='项目名称' :span="2">
        <span class="text--info subtext">{{projectInfo.projectName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目编号'>
        <span class="text--info subtext">{{projectInfo.projectCode}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='备用项目编号'>
        <span class="text--info subtext">{{projectInfo.projectCodeBackup}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='评审项目阶段'>
        <span class="text--info subtext">{{processName(projectInfo?.stageStatus)}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目审批类型'>
        <span class="text--info subtext">{{projectInfo.approveTypeMaxName}} - {{projectInfo.approveTypeMinName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目开始时间'>
        <span class="text--info subtext">{{projectInfo?.ext1?.slice(0,10)}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目预计验收时间'>
        <span class="text--info subtext">{{projectInfo?.ext2?.slice(0,10)}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目预类型'>
        <span class="text--info subtext">{{projectInfo.projectTypeName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='所属公司主体'>
        <span class="text--info subtext">{{projectInfo.principalCompanyName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目负责人'>
        <span class="text--info subtext">{{projectInfo.projectLeaderName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目联系人'>
        <span class="text--info subtext">{{projectInfo?.ext4}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目负责人电话'>
        <span class="text--info subtext">{{projectInfo.projectLeaderPhone}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目联系人电话'>
        <span class="text--info subtext">{{projectInfo.projectContactPhone}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目负责人邮箱'>
        <span class="text--info subtext">{{projectInfo.projectLeaderEmail}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目联系人邮箱'>
        <span class="text--info subtext">{{projectInfo.projectContactEmail}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='是否含可行性研究'>
        <span class="text--info subtext" v-text='projectInfo?.isFsbStudy == 1 ? "是" :"否"' ></span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目立项书'>
        <div v-if="projectInfo.projectProposalArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.projectProposalArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
          </p>
        </div>

        <div class="text--info subtext file-wrap" v-else> - </div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目申报材料'>
        <div v-if="projectInfo.kyFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.kyFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else> - </div>
      </el-descriptions-item>
    </el-descriptions>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabs"
        :label="item.name"
        :name="item.key"
        :key="item.key"
      ></el-tab-pane>
      <keep-alive>
        <component :is="tabIndex" :projectInfo="info"></component>
      </keep-alive>
    </el-tabs>
  </template>

  <!-- 立项 -->
  <template v-if='projectInfo.stageStatus == "2"' class="td-item">
    <el-descriptions :column="2" size="large">
      <el-descriptions-item label-class-name="right-align" label='项目名称'>
        <span class="text--info subtext">{{projectInfo.projectName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='评审项目阶段'>
        <span class="text--info subtext">{{processName(projectInfo?.stageStatus)}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目立项书'>
        <div v-if="projectInfo.projectProposalArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.projectProposalArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
          </p>
        </div>

        <div class="text--info subtext file-wrap" v-else> - </div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目申报材料'>
        <div v-if="projectInfo?.kyFilesArr?.length" class="file-wrap">
          <p
            class="text--info download-link subtext"
            v-for="(obj, index) in projectInfo?.kyFilesArr"
            :key="index"
            @click.prevent="handlePreview(obj)"
          >
            <el-link :underline="false" icon="el-icon-folder">{{ obj?.fileName }}</el-link>
          </p>
        </div>
        <div class="text--info subtext file-wrap" v-else> - </div>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='申请意见'>
        <span class="text--info subtext">{{approveInfo.applyOpinion}}</span>
      </el-descriptions-item>
    </el-descriptions>
  </template>
</template>

<script lang="ts" setup>
import {useRoute } from "vue-router";
import { onMounted, ref, watch } from "vue";
import {processStatus}  from  "/@/utils/globalConstant";
import tab1 from "/@/views/project/detail/components/descTabs/tab1.vue";
import tab2 from "/@/views/project/detail/components/descTabs/tab2.vue";
import tab3 from "/@/views/project/detail/components/descTabs/tab3.vue";
import tab6 from "/@/views/project/detail/components/descTabs/tab6.vue";
import tab7 from "/@/views/project/detail/components/descTabs/tab7.vue";
import tab8 from "/@/views/project/detail/components/descTabs/tab8.vue";
import tab9 from "/@/views/project/detail/components/descTabs/tab9.vue";
import tab10 from "/@/views/project/detail/components/descTabs/tab90.vue";
import {getApproveById} from "/@/api/project";
const activeName = ref("0");
const activeNum = ref(0);
const props = defineProps({
  projectInfo: {
    type: Object
  },
});
let info = ref({});
let tabIndex = ref(tab1);
const approveInfo = ref({});
const route = useRoute();
const tabs = [
  {name:"项目成员",path:tab1,key:0},
  {name:"项目合同",path:tab2,key:1},
  {name:"承担单位",path:tab3,key:2},
  {name:"科研成果",path:tab6,key:3},
  {name:"项目目标及考核指标",path:tab7,key:4},
  {name:"项目实施计划",path:tab8,key:5},
  {name:"变更/终止记录",path:tab9,key:6},
  {name:"科创管理人员",path:tab10,key:7}
];
watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
  },
  { immediate: true }
);
onMounted(() => {
  info.value = props.projectInfo;
});

const getApproveInfo = async () => {
  const queryId = route.query?.id ?? "";
  const {code, data} = queryId && await getApproveById(queryId);
  if (code === 200) {
    approveInfo.value = data;
  }
}

const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};
const handleClick = tab => {
  activeNum.value = +tab.index;
  tabIndex.value = tabs[activeNum.value].path;
};
const processName = (stageStatus) => {
  return processStatus.get(+stageStatus)
}
getApproveInfo()
</script>

<style lang="scss" scoped>
  .file-wrap{
    display: inline-block;
    vertical-align: top
  }
</style>
